<template>
  <div class="warpper-box">
    <div class="inner_box">
     <el-row :gutter="20">
      <el-col :span="6" style="border: 1px solid #EBEEF4;">
        <div style="margin-bottom:10px;border-bottom: 1px solid #EBEEF4;padding: 0 10px;background: #fafafa;margin-left: -10px;margin-right: -10px;overflow: hidden;">
          <label style="line-height: 40px;float: left;">权限列表</label>
          <div style="float: right;margin-top: 6px;">
            <el-button type="primary" size="mini" @click="loadList(true)" icon="el-icon-search">查看父级</el-button>
            <el-button type="primary" size="mini" @click="add(true)" icon="el-icon-circle-plus-outline">新增父级</el-button>
          </div>
        </div>
        <el-tree
        :data="treeData"
        node-key="id"
        @node-click="handleNodeClick"
        :default-expand-all="false"
        :expand-on-click-node="false">
          <span slot-scope="{ node,data }" class="custom-tree-node">
            <span style="margin-right:20px;"> <i style="margin-right: 4px;" :class="data.levels < 3?'el-icon-menu':'el-icon-thumb'"></i>{{ data.name }}</span>
            <el-button type="text" size="mini" v-if="data.levels < 3" @click.stop="append(data,node)">添加</el-button>
            <el-button type="text" size="mini" @click.stop="treeEdit(data,node)">修改</el-button>
            <el-button type="text" size="mini" @click.stop="treeDel(data,node)">删除</el-button>
          </span>
        </el-tree>
        
      </el-col>
      <el-col :span="18">
        <system-list
          :key="keys"
          :tableData="tables.tableData" 
          :tableLabel="tables.tableLabel" 
          :models="tables" 
          @on-search-click="loadList"
          @on-edit-click="add"
          @on-del-click="treeDel"
          @on-enable-click="onEnable"
          />
      </el-col>
     </el-row>
    
    <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
      <form-create 
      v-model="form.fApi" 
      :rule="form.rule" 
      :option="form.option"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="form.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { 
  FORM_PERMISSION,
  OPTION_INLINE,
  PERMISSION_LABEL,
  OPTION_BLOCK
} from "./systemUser/system_form"
import { 
  getPermissionList,
  savePermission,
  delPermission,
  enablePermission,
  disablePermission
} from "@/api/system_api"
import SystemList from "./systemUser/system_list"
export default {
  components:{
    SystemList
  },
  data() {
    return {
      keys:1,
      tables:{
        total:0,
        width:'150',
        tableData:[],
        tableLabel: PERMISSION_LABEL
      },
      form:{
        id:'',
        pid:'',
        sort:'',
        title:'新增',
        width:"800px",
        visible:false,
        fApi:{},
        rule:[],
        option:OPTION_BLOCK
      },
      page:{
        pageNum:1,
        pageSize:10,
      },
      treeData:[]
    };
  },
  mounted() {
    this.loadList(true);
    this.loadTree();
  },
  methods: {
    async loadList(formData) {
      let params = {};
      if(formData !== undefined && formData.type === 'page'){
        this.page.pageNum = formData.page;
        this.page.pageSize = formData.pageSize;
      }
      if(formData===true){
        this.page.pageNum = 1;
        this.form.pid = '';
        this.keys++;
      }
      params.pid = this.form.pid;
      params.id = this.form.id;
      params.pageNum = this.page.pageNum;
      params.pageSize = this.page.pageSize;
      const req = await getPermissionList(params);
      this.tables.tableData = req.data.list;
      this.tables.tableData.forEach(v=>{
        v.edit=true;v.del=true
      })
      this.tables.total = req.data.total;
      
    },
    async loadTree(){
      this.treeData = await store.dispatch('user/getAllTree');
    },
    handleNodeClick(data,node,el){
      this.form.pid = data.id;
      this.form.id = '';
      this.loadList();
      this.loadTree();
    },
    append(data,node){
      if(data.levels ===1){
        this.form.sort = 20;
      }else if(data.levels ===2){
        this.form.sort = 30;
      }
      this.form.rule = FORM_PERMISSION;
      this.form.title = "新增子级";
      this.form.id = "";
      this.form.pid = data.id;
      this.form.visible = true;
      this.$nextTick(()=>{
          this.form.fApi.resetFields();
      })
    },
    treeEdit(data,node){
      this.form.rule = FORM_PERMISSION;
      this.form.visible = true;
      if(data.levels ===1){
        this.form.sort = 20;
      }else if(data.levels ===2){
        this.form.sort = 30;
      }
      this.$nextTick(()=>{
        this.form.title = "编辑";
        this.form.id = data.id;
        this.form.pid = '';
        this.form.fApi.setValue({
          "name":data.name,
          "code":data.code,
          "url":data.url,
          "menuFlag":data.menuFlag,
          "description":data.description
        })
      })
    },
    treeDel(data,node){
      this.$confirm("确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delPermission(data.id);
        this.$message.success("删除成功");
        this.loadList();
        this.loadTree();
      }).catch(() => {});
    },
    add(row){
      this.form.rule = FORM_PERMISSION;
      this.form.visible = true;
      this.$nextTick(()=>{
        if(row === true){
          this.form.title = "新增";
          this.form.id = "";
          this.form.pid = 0;
          this.form.sort = 10;
          this.form.fApi.resetFields();
        }else{
          if(row.levels ===1){
            this.form.sort = 20;
          }else if(row.levels ===2){
            this.form.sort = 30;
          }
          this.form.title = "编辑";
          this.form.id = row.id;
          this.form.pid = '';
          this.form.fApi.setValue({
            "name":row.name,
            "code":row.code,
            "url":row.url,
            "menuFlag":row.menuFlag,
            "description":row.description
          })
        }
      })
    },
    async onFormSubmit() {
      this.form.fApi.submit(async (formData, $f) => {
        try {
          let text = "新增成功";
          if(this.form.id){
            formData.id = this.form.id;
            text = "修改成功"
          }
          
          formData.pid = this.form.pid;
          formData.sort = this.form.sort;
          const req = await savePermission(formData);
          if (req.code == 200) {
            this.$message.success(text);
            this.form.visible = false;
            this.loadList();
            this.loadTree();
            this.form.fApi.resetFields()
          }
        } catch (error) {
          //this.$message.info(JSON.stringify(error));
        }
      });
    },
    onEnable(row){
      let text = row.statusFlag==='1' ?'禁用':'启用';
      let tips = row.statusFlag==='1' ?'禁用成功':'启用成功';
      this.$confirm("确认"+text+"", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        row.statusFlag === '1' ? await disablePermission(row.id) : await enablePermission(row.id);
        this.$message.success(tips);
        this.loadList();
        this.loadTree();
      }).catch(() => {});
    },
  }
};
</script>